<!-- 视频监控设备 -->
<template>
	<BaseContainer>
		<aplid-base-crud
			ref="crud"
			class="w-100"
			v-bind="{ ...baseConfig, ...$attrs }"
			:tableConfig="showMenu ? baseConfig.tableConfig : tableConfigNoMenu"
			:layout="activeIndex == 0 ? 'table' : 'card'"
			:searchConfig="showSearch ? baseConfig.searchConfig : undefined"
			:menuBtn="activeIndex == 0 && showMenu ? baseConfig.menuBtn : []"
			:auth="activeIndex == 0 && showMenu ? baseConfig.auth : {}"
			:key="activeIndex"
		>
			<template v-slot:videoPlay="{ row }">
        <el-tag type="danger" v-if="!row.videoUri.includes('http')">无效地址</el-tag>
				<el-button v-else type="primary" link size="small" @click="handleShowPlay(row)">
					<el-icon class="mr8">
						<icon-video-one size="44" />
					</el-icon>
					查看监控
				</el-button>
			</template>
			<template v-slot:nav-tab>
				<ul class="nav-tab">
					<li v-for="(item, index) in tabList" :key="index" :class="{ active: index === activeIndex }" @click="activeIndex = index">
						{{ item.label }}
					</li>
				</ul>
			</template>
			<template v-slot:column="{ row }">
				<div class="w-100 nav-box">
					<VideoPlay
						:key="row.id"
						v-if="row.videoUri"
						:src="row.videoUri"
						:poster="row.posterImg"
						height="200px"
						style="width: 100%; height: 200px; border-radius: 10px"
					></VideoPlay>
					<FilePreview
						v-else
						:showPreviewSrcList="false"
						:src="row.posterImg"
						:baseStyle="{ width: '100%', height: '200px', borderRadius: '10px' }"
					></FilePreview>
					<p class="flex gap-20">
						<span class="text-bold">{{ row.areaName }}</span>
						<span class="text-bold">{{ row.organizationName }}</span>
						<span>{{ row.videoLocationLabel }}</span>
					</p>
					<div class="btn" v-if="showMenu" v-auth="auth.spot" @click="handleShow(row)">抽查</div>
				</div>
			</template>
			<!-- <template v-slot:spotCheck="{ row, show }">
				<SpotCheckForm v-if="show" :nowRowData="row" @refresh="handleRefresh"></SpotCheckForm>
			</template> -->
			<template v-slot:spotCheckDialog="{ row, show }">
				<SpotCheckForm v-if="show" :nowRowData="row" @refresh="handleRefresh"></SpotCheckForm>
			</template>
		</aplid-base-crud>

		<el-dialog v-model="visible" :title="`${nowRowData.organizationName} - 监控播放`" width="60%">
			<VideoPlay v-if="visible" :src="nowRowData.videoUri" :poster="nowRowData.posterImg"></VideoPlay>
		</el-dialog>
	</BaseContainer>
</template>

<script setup>
import { baseConfig, tableConfigNoMenu } from './config'
import SpotCheckForm from '../device/SpotCheckForm/index.vue'
import FilePreview from '@/views/aplid/DetailPage/ContentListItem/FileList/FilePreview.vue'
import VideoPlay from '@/views/aplid/DetailPage/ContentListItem/FileList/videoPlay/index.vue'

const props = defineProps({
	showMenu: {
		type: Boolean,
		default: true,
	},
	showSearch: {
		type: Boolean,
		default: true,
	},
})

let attrs = useAttrs()
const auth = ref(attrs.auth || baseConfig.auth)

const crud = ref(null)
const activeIndex = ref(0)
const tabList = [
	{
		label: '列表视图',
		value: 0,
	},
	{
		label: '视频视图',
		value: 1,
	},
]

const visible = ref(false)
const nowRowData = ref({})
const handleRefresh = () => {
	nextTick(() => {
		crud.value?.refreshChange()
	})
}

const handleShow = (row) => {
	crud.value?.handleOperate('spotCheck', row, '抽查处理')
}

const handleShowPlay = (row) => {
	nowRowData.value = row
	visible.value = true
}
</script>

<style lang="scss" scoped>
.nav-box {
	position: relative;
	.btn {
		position: absolute;
		color: #fff;
		top: 0;
		right: 0;
		z-index: 100;
		background-color: #0052d9;
		padding: 10px;
		border-bottom-left-radius: 10px;
		&:hover {
			cursor: pointer;
		}
	}
}
.nav-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 20px 0;
	.active {
		color: #0052d9;
		font-weight: bold;
	}
	&:hover {
		cursor: pointer;
	}
}
</style>
